<script lang="ts" setup>
import { ref } from "vue";
import Card2 from "./Card2.vue";
import { useRouter } from "vue-router";
// import Card1 from "./Card1.vue"

const props = defineProps({
  data: {
    type: Array,
  },
});

type ItemType = { name: string; desc: string };
const promote = ref<ItemType[]>(props.data as ItemType[]);

const router = useRouter()

const toDetail = () => {
  // window.location.href = "/#/index/promoteDetail";
  router.push({
    path: "/index/promoteDetail"
  })
};
</script>
<template>
  <div class="flex justify-center py-10">
    <div class="gridBox flex-wrap gap-5 px-5">
      <!-- <div v-for="(item, index) in promotes" :key="index + 'pro'">
      <img :src="item.img" alt="" class="w-45 h-45" />
    </div> -->
      <div v-for="(item, index) in promote" :key="index + 'pro'">
        <!-- <Card1 :item="item" /> -->
        <Card2 :item="item" @clicked="toDetail" />
      </div>
    </div>

  </div>
</template>
<style lang="scss" scoped>
@import "../../../utils/scss/global.scss";

.gridBox {
  display: flex;
  flex-wrap: wrap;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  place-content: center;
  place-items: center;
  row-gap: 50px;
  max-width: 1290px;
  // $per: 20%;
  // $up: 50px;
  // padding: $up $per $up $per;
}

@include mobile {
  .gridBox {
    display: flex;
  }
}
</style>
